<template>
  <div>
    <div>
      <img src="../assets/img/about_index.jpg" alt="加载失败">
    </div>

    <div style="width: 1200px;height:1100px;border: 1px solid transparent;margin-left: 100px">
      <div style="float: left;width: 230px;font-size: 18px">
        <ul>
          <li v-for="(item,index) in list">
            <a href="javascript:void(0);" @click="tap(index)" :class="{active_li: ind == index}">{{item.title}}</a>
          </li>
          <!--<li>-->
            <!--<div style="border-bottom: 1px dashed rgb(224, 224, 224);margin-top: 10px"></div>-->
          <!--</li>         -->
        </ul>
      </div>

      <div style="width: 970px;float: left;">

        <template v-if="aa">
          <div style="width: 910px;margin-left: 50px">
            <div class="service_title">公司简介</div>
            <div style="border-bottom: 1px solid #ccc;width: 910px;"></div>

            <div>
              <div>
                <h4 style="color: rgb(102, 102, 102)">
                  公司蓬勃发展壮大 / THE COMPANY IS BOOMING
                </h4>
              </div>

              <div style="color: rgb(153, 153, 153);font-size: 14px">
                <p>
                  限公司（以下简称XXX）成立于2013年5月，是一家专业从事个人与小微企业融资咨询、融资方案策划、融资代办等服务的公司。致力于为有融资
                  需求的客户提供专业的融资咨询、匹配和交易代办服务。基于多年的融资、互联网经验和业务理解能力，以最人性最专业的方式为用户提供各种金
                  融机构、银行和出借机构贷款产品的搜索、匹配服务
                </p>
              </div>

              <div style="color: rgb(153, 153, 153);font-size: 14px">
                <p>
                  团队全部由资深的金融人士组成，创始人团队行业经验全部在10年以上。源拥有大量的融资服务专业顾问，让有融资需求的客户和融资顾问直接联
                  系对接。打造一个全方位融资产品超市
                </p>
              </div>

              <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 50px">
                <img src="../assets/img/about_profile.jpg"/>
              </div>

              <div style="border-bottom: 1px solid #ccc;width: 910px;margin-top: 50px"></div>

              <div style="width: 910px;height: 250px;border: 1px solid transparent;position: relative;margin-top: 50px">

                <div style="position: absolute;top: 20px;left: 214px;width: 152px;height: 33px;font-size:14px;color: #009fe9 ">
                  <span>开始涉足金融服务领域</span>
                </div>

                <div style="position: absolute;top: 15px;left: 570px;width: 152px;height: 33px;font-size:14px;color: #009fe9 ">
                  <span>
                    <span>有抵押类、P2P无抵</span><br>
                    <span>押类、非P2P贷款</span>
                  </span>
                </div>

                <div style="position: absolute;top: 40px;left: 25px;width: 152px;height: 33px;color: rgb(224, 224, 224);font-weight: bold">
                  <span><span style="font-size: 45px;">2013</span><span style="font-size:30px ">年</span></span>
                </div>

                <div style="position: absolute;top: 60px;left: 277px">
                  <img src="../assets/img/development_blue.png"/>
                </div>

                <div style="position: absolute;top: 40px;left: 380px;width: 152px;height: 33px;color: rgb(224, 224, 224);font-weight: bold">
                  <span><span style="font-size: 45px;">2015</span><span style="font-size:30px ">年</span></span>
                </div>

                <div style="position: absolute;top: 60px;left: 629px">
                  <img src="../assets/img/development_blue.png"/>
                </div>

                <div style="position: absolute;top: 40px;left: 747px;width: 152px;height: 33px;color: rgb(224, 224, 224);font-weight: bold">
                  <span><span style="font-size: 45px;">2017</span><span style="font-size:30px ">年</span></span>
                </div>

                <div style="position: absolute;top: 100px">
                  <img src="../assets/img/development.png"/>
                </div>

                <div style="position: absolute;top: 140px;left: 85px">
                  <img src="../assets/img/development_hui.png"/>
                </div>

                <div style="position: absolute;top: 140px;left: 218px;width: 152px;height: 33px;color: rgb(0, 160, 233);font-weight: bold">
                  <span><span style="font-size: 45px;">2014</span><span style="font-size:30px ">年</span></span>
                </div>

                <div style="position: absolute;top: 140px;left: 447px">
                  <img src="../assets/img/development_hui.png"/>
                </div>

                <div style="position: absolute;top: 140px;left: 559px;width: 152px;height: 33px;color: rgb(0, 160, 233);font-weight: bold">
                  <span><span style="font-size: 45px;">2016</span><span style="font-size:30px ">年</span></span>
                </div>

                <div style="position: absolute;top: 140px;left: 808px">
                  <img src="../assets/img/development_hui.png"/>
                </div>

                <div style="position: absolute;top: 200px;left: 24px;width: 152px;height: 33px;font-size:14px;color: #888 ">
                  <span>开始涉足金融服务领域</span>
                </div>

                <div style="position: absolute;top: 200px;left: 400px;width: 152px;height: 33px;font-size:14px;color: #888 ">
                  <span>
                    <span>无抵押服务中心成立</span><br>
                    <span>融资租赁中心筹备中</span>
                  </span>
                </div>

                <div style="position: absolute;top: 200px;left: 747px;width: 152px;height: 33px;font-size:14px;color: #888 ">
                  <span>
                    <span>专注服务于个人和中小</span><br>
                    <span>企业金融融资服务</span>
                  </span>
                </div>


              </div>

              <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 50px">
                <p>
                  只有积极进取、勇于开拓，坚持开放与创新才能更好地满足客户需求。无论技术多么先进，产品如何优越、解决方案和业务管理怎样科学合理，如
                  果没有转化为商业成功那么便无从谈论其价值所在。所以我们以客户需求为导向，并围绕客户需求持续创新。
                </p>
              </div>

            </div>
          </div>
        </template>

        <template v-else>

          <div style="width: 910px;margin-left: 50px">
            <div class="service_title">服务条款</div>
            <div style="border-bottom: 1px solid #ccc;width: 910px;"></div>


              <div>
                <h4 style="color: rgb(102, 102, 102)">
                  个人信息的使用 / USE OF PERSONAL INFORMATION
                </h4>
              </div>

              <div style="margin-top: 50px">
                <div style="float: left;margin-right: 30px">
                  <img src="../assets/img/service_terms-1.png"/>
                </div>
                <div style="float: left;margin-right: 30px">
                  <img src="../assets/img/service_terms-2.jpg"/>
                </div>
              </div>

              <div style="clear: both"></div>
              <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 50px">
                <p>
                  当您在网络上注册成为网站用户或使用服务时，代表您在知情和同意的情况下，自愿向我们提供您的用户个人信息，包括但不限于：姓名、地址、
                  电邮地址、联系电话及与贷款相关的个人资质等（以下简称“个人信息”）。
                </p>
              </div>

            <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 30px">
              <p>
                您向我们提供的个人信息将用于为您提供更好的服务、业务相关的营销研究，以及以短信或电子邮件的方式向您提供有关我们的产品、服务和活动
                的信息。在必要情形下一些第三方可能接触并使用您的个人信息，包括得到授权的我们员工、以及不时执行与我们的业务、营销活动和数据整理有
                关工作的其他公司或人员。所有此类人员及公司均需遵守相关保密协议，同时也需遵守国家关于个人信息保护有关法律法规，以确保您的个人信息
                随时得到保护。
              </p>
            </div>

            <div style="color: #888;margin-top: 50px">
              <h4>转正的价值观 / POSITIVE VALUES</h4>
            </div>

            <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 30px">
              <p>
                存在的唯一理由就是为客户服务，客户需求作为发展的原动力决定了我们要坚持以客户为中心，快速响应客户需求，持续为客户创造长期价值进而
                成就客户。我们工作的方向和价值评价的标尺是为客户提供有效服务，成就客户就是成就我们自己。
              </p>
            </div>

            <div style="color: rgb(153, 153, 153);font-size: 14px;">
              <p>
                至诚守信
              </p>
            </div>

            <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 10px">
              <p>
                只有内心坦荡诚恳才能让我们言出必行，信守承诺。我们拥有诚信这一最重要的无形资产，正是这种资产让亿信源能够长期赢得客户的青睐。
              </p>
            </div>

            <div style="color: rgb(153, 153, 153);font-size: 14px;">
              <p>
                艰苦奋斗
              </p>
            </div>
            <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 10px">
              <p>
                我们并不制造需求也没有稀缺资源可以依赖，唯一能够赢得客户的尊重与信赖是艰苦奋斗的精神。每个微小活动中都体现出我们的奋斗，而涓滴止
                水汇聚成江河，最后所有为客户创造价值终将成为汪洋大海。我们坚信付出与回报将成正比，所以奋斗也将永不止息。
              </p>
            </div>
            <div style="color: rgb(153, 153, 153);font-size: 14px;">
              <p>
                团队合作
              </p>
            </div>
            <div style="color: rgb(153, 153, 153);font-size: 14px;margin-top: 10px">
              <p>
                胜则举杯相庆，败则拼死相救。团队合作不仅是跨文化的群体协作精神，也是打破部门墙、提升流程效率的有力保障。
              </p>
            </div>

           </div>

        </template>

      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: 'about',
    data () {
      return {
        aa: 1,
        ind: 0,
        list: [
          {
            title: '公司介绍'
          },
          {
            title: '服务条款'
          }
        ]

      }
    },
    methods: {
      tap: function (index) {
        this.ind = index
        this.aa = !this.aa
      }
    }
  }

</script>
<style lang="scss" scoped>
  .active_li{
    color: #009fe9;
  }
  .service_title{
    font-size: 18px;
    border-bottom: 4px solid #009fe9;
    width: 100px;
    height:60px;
    line-height: 60px;
    text-align: center;
  }
ul li{
  a{
    display: block;
    width: 230px;
    height: 40px;
    line-height: 40px;
    color: #666;
    text-decoration: blink;
    &:hover{
      color: #009fe9;;
    }
  }
}


</style>
